<template>
  <div class="home-page overflow-y-auto fill-height">
    <el-row :gutter="16">
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/jiaqianzhuangtai.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">2562</div>
              <div class="font-size-body-2 subtitle">房屋数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/laweichaxun.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">562</div>
              <div class="font-size-body-2 subtitle">商户数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/xiaoqushuju.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">91</div>
              <div class="font-size-body-2 subtitle">欠费数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/biaodanmoban.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">2562</div>
              <div class="font-size-body-2 subtitle">租房记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/biaodanyewu.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">32562</div>
              <div class="font-size-body-2 subtitle">过磅记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover">
          <div class="d-flex align-center justify-space-between">
            <img src="../assets/icon_hokcadbmwk/mendiankanban.png" height="60" width="60" />
            <div class="d-flex flex-column align-center justify-space-between fill-width">
              <div class="font-weight-bold font-size-title-2 pb-3">23562</div>
              <div class="font-size-body-2 subtitle">缴费记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16">
      <el-col :span="16">
        <el-card class="mt-4" shadow="hover">
          <template #header>
            <el-space size="large">
              <el-button type="primary" round plain>租房信息</el-button>
              <el-button round plain>房屋信息</el-button>
              <el-button round plain>欠费信息</el-button>
              <el-button round plain>停车信息</el-button>
            </el-space>
          </template>
          <div id="main1" style="width: 100%;height: 300px"></div>
        </el-card>
        <el-card class="mt-4" shadow="hover">
          <template #header>
            <div class="d-flex justify-space-between">
              <div class="">消息通知</div>
              <el-button text>更多</el-button>
            </div>
          </template>
          <div class="d-flex flex-column align-start justify-center">
            <div class="d-flex align-center mb-2 justify-space-between fill-width">
              <div class="d-flex align-center">
                <el-tag type="success" class="mr-3">车辆入场</el-tag>
                <div class="font-size-body-1">车辆</div>
                <div class="font-weight-bold font-size-body-1 mx-1">新A·7DH18</div>
                <div class="font-size-body-1">已于 2023-02-21 18:12:51 入场</div>
              </div>
              <el-button text size="small" type="primary" plain>详情</el-button>
            </div>

            <div class="d-flex align-center mb-2 justify-space-between fill-width">
              <div class="d-flex align-center">
                <el-tag type="warning" class="mr-3">车辆出场</el-tag>
                <div class="font-size-body-1">车辆</div>
                <div class="font-weight-bold font-size-body-1 mx-1">新A·7DH18</div>
                <div class="font-size-body-1">已于 2023-02-21 19:12:51 出场</div>
                <div class="font-size-body-1">，缴费 13.00</div>
              </div>
              <el-button text size="small" type="primary" plain>详情</el-button>
            </div>

            <div class="d-flex align-center mb-2 justify-space-between fill-width">
              <div class="d-flex align-center">
                <el-tag type="danger" class="mr-3">欠费提醒</el-tag>
                <div class="font-size-body-1">房屋</div>
                <div class="font-weight-bold font-size-body-1 mx-1">B区1-2305</div>
                <div class="font-size-body-1">已于 2023-02-21 19:12:51 欠费</div>
                <div class="font-size-body-1">，需缴费 1314.00</div>
              </div>
              <el-button text size="small" type="primary" plain>详情</el-button>
            </div>

            <div class="d-flex align-center mb-2 justify-space-between fill-width">
              <div class="d-flex align-center">
                <el-tag type="danger" class="mr-3">欠费提醒</el-tag>
                <div class="font-size-body-1">房屋</div>
                <div class="font-weight-bold font-size-body-1 mx-1">B区1-2306</div>
                <div class="font-size-body-1">已于 2023-02-21 19:12:51 欠费</div>
                <div class="font-size-body-1">，需缴费 1314.00</div>
              </div>
              <el-button text size="small" type="primary" plain>详情</el-button>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="mt-4" shadow="hover">
          <template #header>
            <div class="d-flex justify-space-between">
              <div class="">增长率</div>
              <el-button text>更多</el-button>
            </div>
          </template>
          <div id="main2" style="width: 100%;height: 600px"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

type EChartsOption = echarts.EChartsOption;

function init1() {
  var chartDom = document.getElementById("main1")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ["肉区", "蔬菜区", "建材区", "水果区", "海鲜区"],
      itemStyle: {
        shadowColor: "rgba(0, 0, 0, 0.2)",
        shadowBlur: 10,
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周七"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "蔬菜区",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value} 户",
        },
      },
      {
        type: "value",
        name: "建材区",
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: "{value} ",
        },
      },
    ],
    series: [
      {
        name: "肉区",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " 户";
          },
        },
        data: [
          2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3, 162, 32, 20, 6, 3,
        ],
      },
      {
        name: "蔬菜区",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " 户";
          },
        },
        data: [
          12, 24, 17, 43, 45, 176, 235, 262, 432, 120, 36, 23, 362, 132, 230, 46, 123,
        ],
      },
      {
        name: "建材区",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " 户";
          },
        },
        data: [
          12, 23, 17, 133, 125, 76, 135, 362, 232, 220, 136, 123, 162, 132, 230, 46, 123,
        ],
      },
      {
        name: "水果区",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " 户";
          },
        },
        data: [
          32, 23, 27, 103, 225, 76, 15, 162, 132, 120, 136, 123, 162, 132, 230, 46, 123,
        ],
      },
      {
        name: "海鲜区",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " 户";
          },
        },
        data: [
          22, 123, 47, 403, 125, 176, 35, 62, 12, 120, 106, 23, 62, 32, 230, 46, 123,
        ],
      },
      {
        name: "环比增长",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return (value as number) + " %";
          },
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
      },
    ],
  };

  option && myChart.setOption(option);
}

function init2() {

  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById("main2")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  setTimeout(function() {
    option = {
      legend: {
        itemStyle: {
          shadowColor: "rgba(0, 0, 0, 0.2)",
          shadowBlur: 10,
        },
      },
      tooltip: {
        trigger: "axis",
        showContent: false,
      },
      dataset: {
        source: [
          ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
          ["肉区", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
          ["蔬菜区", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
          ["建材区", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
          ["水果区", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ["海鲜区", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
        ],
      },
      xAxis: { type: "category" },
      yAxis: { gridIndex: 0 },
      grid: { top: "55%" },
      series: [
        {
          type: "line",
          smooth: true,
          seriesLayoutBy: "row",
          emphasis: { focus: "series" },
          itemStyle: {
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 10,
          },
        },
        {
          type: "line",
          smooth: true,
          seriesLayoutBy: "row",
          emphasis: { focus: "series" },
          itemStyle: {
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 10,
          },
        },
        {
          type: "line",
          smooth: true,
          seriesLayoutBy: "row",
          emphasis: { focus: "series" },
          itemStyle: {
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 10,
          },
        },
        {
          type: "line",
          smooth: true,
          seriesLayoutBy: "row",
          emphasis: { focus: "series" },
          itemStyle: {
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 10,
          },
        },
        {
          type: "pie",
          itemStyle: {
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 10,
          },
          id: "pie",
          radius: "30%",
          center: ["50%", "25%"],
          emphasis: {
            focus: "self",
          },
          label: {
            formatter: "{b}: {@2012} ({d}%)",
          },
          encode: {
            itemName: "product",
            value: "2012",
            tooltip: "2012",
          },
        },
      ],
    };

    myChart.on("updateAxisPointer", function(event: any) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption<echarts.EChartsOption>({
          series: {
            id: "pie",
            label: {
              formatter: "{b}: {@[" + dimension + "]} ({d}%)",
            },
            encode: {
              value: dimension,
              tooltip: dimension,
            },
          },
        });
      }
    });

    myChart.setOption<echarts.EChartsOption>(option);
  });

  option && myChart.setOption(option);
}

function init3() {

}

onMounted(() => {
  init1();
  init2();
  init3();
});


</script>
<style lang="scss" scoped>
.home-page {
  padding: 16px;
  background-color: var(--el-bg-color-page);

  .subtitle {
    color: var(--el-text-color-secondary);
  }
}

</style>
